<template>

  <div class="home">


    <div class="" style="left: 0px; top: 0px; visibility: hidden; position: absolute;">
      <table class="ui_border">
        <tbody>
          <tr>
            <td class="ui_lt">
            </td>
            <td class="ui_t">
            </td>
            <td class="ui_rt">
            </td>
          </tr>
          <tr>
            <td class="ui_l">
            </td>
            <td class="ui_c">
              <div class="ui_inner">
                <table class="ui_dialog">
                  <tbody>
                    <tr>
                      <td colspan="2">
                        <div class="ui_title_bar">
                          <div class="ui_title" unselectable="on" style="cursor: move;">
                          </div>
                          <div class="ui_title_buttons">
                            <a class="ui_min" href="javascript:void(0);" title="最小化" style="display: inline-block;">
                              <b class="ui_min_b">
                              </b>
                            </a>
                            <a class="ui_max" href="javascript:void(0);" title="最大化" style="display: inline-block;">
                              <b class="ui_max_b">
                              </b>
                            </a>
                            <a class="ui_res" href="javascript:void(0);" title="还原">
                              <b class="ui_res_b">
                              </b>
                              <b class="ui_res_t">
                              </b>
                            </a>
                            <a class="ui_close" href="javascript:void(0);" title="关闭(esc键)" style="display: inline-block;">×</a>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="ui_icon" style="display: none;">
                      </td>
                      <td class="ui_main" style="width: auto; height: auto;">
                        <div class="ui_content" style="padding: 10px;">
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <div class="ui_buttons" style="display: none;">
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </td>
            <td class="ui_r">
            </td>
          </tr>
          <tr>
            <td class="ui_lb">
            </td>
            <td class="ui_b">
            </td>
            <td class="ui_rb" style="cursor: se-resize;">
            </td>
          </tr>
        </tbody>
      </table>
    </div>


    <form method="post" action="http://www.gdkcsj.com/login.aspx" id="form1">
      <div id="container">
        <div class="content">
          <div class="regunit">
            <div class="reg_left">
              <div class="login" style="margin-top: 0;">
                <span class="ftitle">用户登录</span>
                <ul class="logininfo">
                  <li>
                    <span>用户名</span>
                    <input v-model="loginForm.username" name="username" type="text" id="username" placeholder="请输入用户名" class="inputbtn" maxlength="25" tabindex="1">
                  </li>
                  <li>
                    <span>密码</span>
                    <input v-model="loginForm.password" name="password" type="password" id="Password" placeholder="请输入密码" maxlength="18" tabindex="2">
                  </li>
                  <li>
                    <span>&nbsp;</span>
                    <span class="code">{{loginForm.checkCode}}</span>
                    <a @click="getImg">看不清？</a>
                  </li>
                  <li>
                    <span>验证码</span>
                    <input v-model="loginForm.code" name="code" type="text" id="VerifyCode" placeholder="请输入上面图片中的验证码" class="inputbtn" maxlength="4" tabindex="3">
                  </li>
                  <li>
                    <a class="redbtn" @click="handleLogin">登录</a>
                  </li>
                  <li>
                    <div>
                      <cite>没有账号？请点击</cite>
                      <a href="/newsRegister" style="color:blue">注册</a>
                    </div>
                  </li>
                </ul>
                <span id="Errmsg" style="color:Red;">
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  import Cookie from 'js-cookie'
  import Message from '@/utils/message'
  import User from '@/api/user.js'

  export default {
    name: 'Login',
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          code:"",
          checkCode:"",
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    mounted() {
      this.getImg();
    },
    methods: {
      getImg() {
        var code = this.createCode(4)
        this.loginForm.checkCode = code
      },
      //生成验证码的方法
      createCode(length) {
        var code = "";
        var codeLength = parseInt(length); //验证码的长度
        ////所有候选组成验证码的字符，当然也可以用中文的
        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
        //循环组成验证码的字符串
        for (var i = 0; i < codeLength; i++)
        {
          //获取随机验证码下标
          var charNum = Math.floor(Math.random() * 62);
          //组合成指定字符验证码
          code += codeChars[charNum];
        }
        return code;
      },

      async handleLogin() {
        console.log("loginform", this.loginForm)
        if(!this.loginForm.code  || this.loginForm.code.toLowerCase()
              != this.loginForm.checkCode.toLowerCase()) {
          Message({type: 'error',message: '请填写正确验证码'})
          return
        }
        if(!this.loginForm.username) {
          Message({type: 'error',message: '请填写用户名'})
          return
        }
        if(!this.loginForm.password) {
          Message({type: 'error',message: '请填写用密码'})
          return
        }
        this.loading = true
        const result = await this.$store.dispatch('user/login', this.loginForm)
        this.loading = false
        if (result) {
          sessionStorage.setItem("username", this.loginForm.username)
          location.href = "/"
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "~@/styles/new_files_m/bootstrap.min.css";
@import "~@/styles/new_files_m/iconfont.css";
@import "~@/styles/new_files_m/comm.css";
@import "~@/styles/new_files_m/info.css";

.code{
  font-family: Arial;
  font-style: italic;
  color: blue;
  font-size: 20px;
  border: 0;
  padding: 2px 3px;
  letter-spacing: 3px;
  font-weight: bolder;
  float: left;
  cursor: pointer;
  width: 80px;
  height: 25px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  background-color: #D8B7E3;
 }
</style>
